<template>
  <div style="padding: 0 50px">
    <router-link to="/">返回</router-link>
    多个元素过渡
    <br />
    <br />
    <br />

    <transition name="btns" mode="out-in" appear>
      <template v-for="(item, i) in btnsList">
        <button
          :key="item.type"
          v-if="currentType === item.type"
          @click="currentTypeChange(i)"
        >
          {{ item.type }}
        </button>
      </template>
    </transition>

    <br />
    <br />
    <br />
    <br />
    <br />
    <transition name="btns" mode="out-in">
      <button v-bind:key="docState" @click="BtnClick">
        {{ buttonMessage }}
      </button>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentType: "ADD",
      btnsList: [{ type: "ADD" }, { type: "EDIT" }, { type: "DELETE" }],
      docState: "saved"
    };
  },
  created() {},
  computed: {
    buttonMessage() {
      switch (this.docState) {
        case "saved":
          return "Edit";
        case "edited":
          return "Save";
        case "editing":
          return "Cancel";
        default:
          return "Edit";
      }
    }
  },
  methods: {
    BtnClick() {
      if (this.docState === "saved") {
        this.docState = "edited";
      } else if (this.docState === "edited") {
        this.docState = "editing";
      } else {
        this.docState = "saved";
      }
    },
    currentTypeChange(i) {
      const benL = this.btnsList.length;
      if (i === benL - 1) {
        this.currentType = this.btnsList[0].type;
      } else {
        this.currentType = this.btnsList[i + 1].type;
      }
    }
  }
};
</script>

<style scoped>
.btns-enter {
  transform: translateX(20px);
  opacity: 0;
}
.btns-leave-to {
  transform: translateX(-20px);
  opacity: 0;
}

.btns-enter-active,
.btns-leave-active {
  transition: all 1s;
}
</style>
